<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="请选择省：" prop="province">
        <!-- <el-input v-model="queryParams.sheng" placeholder="请选择省" clearable @keyup.enter.native="handleQuery" /> -->
        <!-- <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader> -->
        <el-select
          v-model="queryParams.province"
          placeholder="请选择"
          @change="shengChange(queryParams.province)"
        >
          <el-option
            v-for="(item, index) in sheng"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择市：" prop="city">
        <!-- <el-input v-model="queryParams.shi" placeholder="请选择市" clearable @keyup.enter.native="handleQuery" /> -->
        <el-select
          v-model="queryParams.city"
          placeholder="请选择"
          @change="cityChange(queryParams.city)"
        >
          <el-option
            v-for="(item, index) in shi"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择区：" prop="area">
        <!-- <el-input v-model="queryParams.qu" placeholder="请选择区" clearable @keyup.enter.native="handleQuery" /> -->
        <el-select v-model="queryParams.area" placeholder="请选择">
          <el-option
            v-for="(item, index) in qu"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="parkName" label="小区名称：">
        <el-input
          v-model="queryParams.parkName"
          placeholder="请输入小区名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['plot:plot:add']"
          >添加小区</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="pilinagHandleCilcik"
          >批量删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="pilinagBindModel"
          v-hasPermi="['plot:plot:edit']"
          >绑定模型</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['plot:plot:export']">导出</el-button>
      </el-col> -->
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="plotList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="selectFlag"
        show-overflow-tooltip
        type="selection"
        width="55"
        align="center"
      />
      <!-- <el-table-column show-overflow-tooltip label="小区id" align="center" prop="id" /> -->
      <el-table-column
        label="序号"
        align="center"
        type="index"
        width	="80px"
      ></el-table-column>
      <el-table-column
        min-width	="150px"
        show-overflow-tooltip
        label="小区名称"
        align="center"
        prop="parkName"
      >
        <template slot-scope="scope">
          <div
            @click="goBuild(scope.row)"
            style="
              cursor: pointer;
              width: 100%;
              text-align: center;
              color: rgb(64, 158, 255);
            "
          >
            {{ scope.row.parkName }}
        </div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="详细地址"
        align="center"
        prop="address"
      />
      <el-table-column
        show-overflow-tooltip
        label="楼栋数"
        align="center"
        prop="buildNumber"
      />
      <!--<el-table-column show-overflow-tooltip width="100" label="热计量方式" align="center" prop="jiliang" />-->
      <el-table-column
        show-overflow-tooltip
        label="热计量方式"
        min-width="100"
        align="center"
        prop="heatMeter"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.sys_heat_meter"
            :value="scope.row.heatMeter"
          />
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="供热用户数"
        min-width="100"
        align="center"
        prop="heatUser"
      />
      <el-table-column
        show-overflow-tooltip
        label="供热面积"
        align="center"
        prop="heatArea"
      />
      <el-table-column
        show-overflow-tooltip
        label="面积单价"
        align="center"
        prop="areaPrice"
      />
      <el-table-column
        show-overflow-tooltip
        label="热量单价"
        align="center"
        prop="heatPrice"
      />
      <el-table-column
        show-overflow-tooltip
        label="所属物业"
        align="center"
        prop="ownProperty"
      />
      <el-table-column
        show-overflow-tooltip
        label="供热公司"
        align="center"
        prop="heatCompany"
      />
      <el-table-column
        show-overflow-tooltip
        label="创建人"
        align="center"
        prop="createName"
      />
      <el-table-column
        show-overflow-tooltip
        label="创建时间"
        align="center"
        prop="createTime"
      />
      <el-table-column
        width="120px"
        label="当前模型"
        align="center"
        prop="customModels"
      >
        <template slot-scope="scope">
          <el-tooltip placement="top">
            <div slot="content">
              <div
                style="text-align: center; margin-bottom: 5px"
                :key="index"
                v-for="(item, index) in scope.row.customModels
                  ? scope.row.customModels
                  : []"
              >
                {{ item.modelName }}
              </div>
            </div>
            <div
              style="
                cursor: pointer;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{
                scope.row.customModels && scope.row.customModels.length > 0
                  ? scope.row.customModels[0].modelName
                  : ""
              }}
            </div>
          </el-tooltip>
        </template>
        <!-- <template slot-scope="scope">
          <div v-for="item, index in scope.row.customModels" :key="index">
            {{ item.modelName }}
          </div>
        </template> -->
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="调控方法"
        align="center"
        prop="regulationMethod"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.regulationMethod === '1'">自动调控</div>
          <div v-if="scope.row.regulationMethod === '2'">手动调控</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="省"
        align="center"
        prop="provinceName"
      />
      <el-table-column
        show-overflow-tooltip
        label="市"
        align="center"
        prop="cityName"
      />
      <el-table-column
        show-overflow-tooltip
        label="区/县"
        align="center"
        prop="areaName"
      />
      <el-table-column
        width="100"
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['plot:plot:edit']"
            >修改</el-button
          >
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['plot:plot:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改小区对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        label-position="left"
        style="display: flex; flex-wrap: wrap; justify-content: space-between"
      >
        <el-form-item label="小区名称" prop="parkName">
          <el-input v-model="form.parkName" placeholder="请输入小区名称" />
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入详细地址" />
        </el-form-item>
        <!-- <el-form-item label="楼栋数" prop="buildNumber">
          <el-input v-model="form.buildNumber" placeholder="请输入楼栋数" />
        </el-form-item> -->
        <el-form-item label="热计量方式" prop="heatMeter">
          <el-select
            v-model="form.heatMeter"
            placeholder="请选择热计量方式"
            clearable
          >
            <el-option
              v-for="dict in dict.type.sys_heat_meter"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="供热用户数" prop="heatUser">
          <el-input v-model.number="form.heatUser" placeholder="请输入供热用户" />
        </el-form-item>
        <el-form-item label="供热面积" prop="heatArea">
          <el-input v-model="form.heatArea" placeholder="请输入供热面积" />
        </el-form-item> -->
        <el-form-item label="面积单价" prop="areaPrice">
          <el-input v-model="form.areaPrice" placeholder="请输入面积单价" />
        </el-form-item>
        <el-form-item label="热量单价" prop="heatPrice">
          <el-input v-model="form.heatPrice" placeholder="请输入热量单价" />
        </el-form-item>
        <el-form-item label="所属物业" prop="ownProperty">
          <el-input v-model="form.ownProperty" placeholder="请输入所属物业" />
        </el-form-item>
        <el-form-item label="供热公司" prop="heatCompany">
          <el-input v-model="form.heatCompany" placeholder="请输入供热公司" />
        </el-form-item>
        <el-form-item label="一级模型" prop="modelIds1">
          <el-select v-model="form.modelIds1" placeholder="请选择" @change="$forceUpdate()">
            <el-option
              v-for="(item, index) in CustomModelSelect1"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级模型">
          <el-select v-model="form.modelIds2" placeholder="请选择" multiple @change="$forceUpdate()">
            <el-option
              v-for="(item, index) in CustomModelSelect2"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="一级模型" prop="modelIds">
          <el-select v-model="formModelSelect1" placeholder="请选择">
            <el-option
              v-for="(item, index) in CustomModelSelect1"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级模型">
          <el-select v-model="formModelSelect2" placeholder="请选择" multiple>
            <el-option
              v-for="(item, index) in CustomModelSelect2"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="省：" prop="province">
          <el-select
            v-model="form.province"
            placeholder="请选择省"
            @change="shengChangeAdd(form.province)"
          >
            <el-option
              v-for="(item, index) in shengAdd"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市：" prop="city">
          <el-select
            v-model="form.city"
            placeholder="请选择市"
            @change="cityChangeAdd(form.city)"
          >
            <el-option
              v-for="(item, index) in shiAdd"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区/县：" prop="area" style="">
          <el-select v-model="form.area" placeholder="请选择区/县">
            <el-option
              v-for="(item, index) in quAdd"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自动抄表时间" prop="intervalTime" label-width="120px" id="longlable">
          <!-- <el-time-select @change="timeChange" v-model="form.intervalTime" :picker-options="{ start: '00:00', step: '01:00', end: '23:00' }"
            placeholder="选择自动抄表时间">
          </el-time-select> -->
          <el-input
            v-model="form.intervalTime"
            placeholder="请输入自动抄表时间"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="绑定模型"
      :visible.sync="dialogMx"
      width="500px"
      class="bindModel"
    >
      <el-form
        ref="mxForm"
        :rules="moxRules"
        :model="moxForm"
        style="background: unset"
      >
        <el-form-item label="一级模型:" prop="formModelSelect1">
          <el-select v-model="moxForm.formModelSelect1" placeholder="请选择">
            <el-option
              v-for="(item, index) in CustomModelSelect1"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级模型:">
          <el-select
            v-model="moxForm.formModelSelect2"
            placeholder="请选择"
            multiple
          >
            <el-option
              v-for="(item, index) in CustomModelSelect2"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogMx = false">取 消</el-button>
        <el-button type="primary" @click="selectMoxOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listPlot,
  getPlot,
  delPlot,
  addPlot,
  updatePlot,
} from "@/api/plot/plot";
// import { plotList } from "@/api/mock"
// import data6 from "@/utils/data6";
// import sheng from "@/utils/sheng";
// import shi from "@/utils/shi";
// import qu from "@/utils/qu";
import { getprovince, getcity } from "@/api/system/user";
import { listCustomModelSelect } from "@/api/system/utils";
import { batchBindModel } from "@/api/customModel/customModel";

export default {
  name: "Plot",
  dicts: ["sys_heat_meter", "control_method"],
  data() {
    let validateTime = (rule, value, callback) => {
      if (value < 1 || value > 23) {
        return callback(new Error("时间范围1-23"));
      } else if (!Number.isInteger(Number(value))) {
        return callback(new Error("时间需为整数"));
      } else {
        callback();
      }
    };
    return {
      // 模型
      dialogMx: false,

      moxForm: {
        formModelSelect1: "",
        formModelSelect2: [],
      },
      moxRules: {
        formModelSelect1: [
          { required: true, message: "请选择一级模型", trigger: "change" },
        ],
      },
      //小区一级模型下拉菜单
      CustomModelSelect1: [],
      //小区二级模型下拉菜单
      CustomModelSelect2: [],
      //小区一级模型选择
      formModelSelect1: [],
      //小区二级模型选择
      formModelSelect2: null,
      // 省市区
      options: [],
      sheng: [],
      shi: [],
      qu: [],
      shengAdd: [],
      shiAdd: [],
      quAdd: [],
      // 是否显示多选框
      selectFlag: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 小区表格数据
      plotList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        parkName: null,
        province: null,
        city: null,
        area: null,
      },
      // 表单参数
      form: {
        modelIds1:"",
        modelIds2:[]
      },
      // 表单校验
      rules: {
        parkName: [
          { required: true, message: "小区名称不能为空", trigger: "blur" },
        ],
        address: [
          { required: true, message: "详细地址不能为空", trigger: "blur" },
        ],
        buildNumber: [
          { required: true, message: "楼栋数不能为空", trigger: "blur" },
        ],
        heatUser: [
          { required: true, message: "供热用户数不能为空", trigger: "blur" },
          { type: "number", message: "请输入数字", trigger: "blur" },
        ],
        heatArea: [
          { required: true, message: "供热面积不能为空", trigger: "blur" },
        ],
        areaPrice: [
          { required: true, message: "面积单价不能为空", trigger: "blur" },
        ],
        heatPrice: [
          { required: true, message: "热量单价不能为空", trigger: "blur" },
        ],
        ownProperty: [
          { required: true, message: "所属物业不能为空", trigger: "blur" },
        ],
        heatCompany: [
          { required: true, message: "供热公司不能为空", trigger: "blur" },
        ],
        province: [
          { required: true, message: "省不能为空", trigger: "change" },
        ],
        city: [{ required: true, message: "市不能为空", trigger: "blur" }],
        area: [{ required: true, message: "区/县不能为空", trigger: "blur" }],
        createBy: [
          { required: true, message: "创建者不能为空", trigger: "blur" },
        ],
        createTime: [
          { required: true, message: "创建时间不能为空", trigger: "blur" },
        ],
        modelIds1: [
          { required: true, message: "请选择一级模型", trigger: "blur" },
        ],
        intervalTime: [
          { required: true, message: "请选择抄表时间", trigger: "blur" },
          { validator: validateTime, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getList();
    //小区一级模型下拉菜单
    listCustomModelSelect({
      modelType: "0",
      modelLevel: "1",
    }).then((res) => {
      // console.log("小区一级模型下拉菜单",res.rows);
      this.CustomModelSelect1 = res.rows;
    });
    //小区二级模型下拉菜单
    listCustomModelSelect({
      modelType: "0",
      modelLevel: "2",
    }).then((res) => {
      // console.log("小区二级模型下拉菜单",res.rows);
      this.CustomModelSelect2 = res.rows;
    });
    getprovince().then((res) => {
      this.sheng = res.data;
      this.shengAdd = res.data;
    });
  },
  methods: {
    shengChange(pid) {
      getcity({ pid: pid }).then((res) => {
        this.shi = res.data;
        this.qu = [];
        this.queryParams.city = null;
        this.queryParams.area = null;
      });
    },
    cityChange(pid) {
      getcity({ pid: pid }).then((res) => {
        this.qu = res.data;
        this.queryParams.area = null;
      });
    },
    shengChangeAdd(pid, setnull) {
      if (setnull == null) {
        setnull = true;
      }
      getcity({ pid: pid }).then((res) => {
        this.shiAdd = res.data;
        this.quAdd = [];
        if (setnull) {
          this.form.city = null;
          this.form.area = null;
        }
      });
    },
    cityChangeAdd(pid, setnull) {
      if (setnull == null) {
        setnull = true;
      }
      getcity({ pid: pid }).then((res) => {
        this.quAdd = res.data;
        if (setnull) {
          this.form.area = null;
        }
      });
    },

    /** 查询小区列表 */
    getList() {
      this.loading = true;
      listPlot(this.queryParams).then(
        (response) => {
          this.plotList = response.rows;
          this.total = response.total;
          this.loading = false;
        },
        (err) => {
          this.loading = false;
        }
      );
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        parkName: null,
        address: null,
        buildNumber: null,
        heatUser: null,
        heatArea: null,
        areaPrice: null,
        heatPrice: null,
        ownProperty: null,
        heatCompany: null,
        province: null,
        city: null,
        area: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        modelIds: null,
      };
      this.formModelSelect1 = [];
      this.formModelSelect2 = [];
      this.moxForm = {
        formModelSelect1: "",
        formModelSelect2: [],
      };
      this.resetForm("form");
      this.resetForm("mxForm");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加小区";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids;
      getPlot(id).then((response) => {
        this.form = response.data;
        this.temp(response.data.modelIds, this.CustomModelSelect1);
        this.open = true;
        this.title = "修改小区";
        this.shengChangeAdd(this.form.province, false);
        this.cityChangeAdd(this.form.city, false);
      });
    },
    //一级二级模型回显匹配函数
    temp(modelIds, CustomModelSelect1) {
      if(!modelIds){
        return
      }
      let modelIdsList = modelIds.split(",").filter((item) => item !== "");
      console.log("模型数组", modelIdsList);
      console.log("下拉一级模型", CustomModelSelect1);
      if (modelIdsList.length === 1) {
        this.form.modelIds1 = modelIdsList[0];
        console.log("表单中的一级模型",modelIdsList[0],typeof(modelIdsList[0]));
        return;
      }
      let modelSelect1 = modelIdsList.filter((item) => {
        return CustomModelSelect1.some((item1) => {
          console.log("item1", item1);
          return item1.value == item;
        });
      });
      console.log("一级模型", modelSelect1);
      let modelSelect2 = modelIdsList.filter(
        (item) => item != modelSelect1.toString()
      );
      console.log("二级模型", modelSelect2);
      this.form.modelIds1 = modelSelect1[0];
      this.form.modelIds2 = modelSelect2;
      
    },
    /** 提交按钮 */
    submitForm() {
      // console.log(this.form.modelIds1, this.form.modelIds2);
      //一级模型和二级模型拼接
      let modelIds1 = this.form.modelIds1 + ",";
      let modelIds = modelIds1;
      if (this.form.modelIds2 && this.form.modelIds2.length) {
        let modelIds2 = this.form.modelIds2.toString() + ",";
        modelIds = modelIds1 + modelIds2;
      }
      this.form.modelIds = modelIds;
      // console.log(modelIds);
      this.$refs["form"].validate((valid) => {
        console.log(123);
        if (valid) {
          if (this.form.id != null) {
            updatePlot(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPlot(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    // 批量删除
    pilinagHandleCilcik() {
      if (this.ids.length === 0) {
        this.selectFlag = !this.selectFlag;
      } else {
        const ids = this.ids;
        this.$modal
          .confirm("是否删除所选数据？")
          .then(function () {
            return delPlot(ids);
          })
          .then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          })
          .catch(() => {});
      }
    },
    //批量绑定模型
    pilinagBindModel() {
      // this.reset()
      if (this.ids.length === 0) {
        this.selectFlag = !this.selectFlag;
      } else {
        const ids = this.ids;
        console.log(ids);
        this.reset();
        this.dialogMx = true;
      }
    },
    // 提交绑定模型
    selectMoxOk() {
      console.log(this.moxForm.formModelSelect1, this.moxForm.formModelSelect2);
      //一级模型和二级模型拼接
      let formModelSelect1 = "," + this.moxForm.formModelSelect1 + ",";
      let formModel = formModelSelect1;
      if (this.moxForm.formModelSelect2.length) {
        let formModelSelect2 = this.moxForm.formModelSelect2.toString() + ",";
        formModel = formModelSelect1 + formModelSelect2;
      }
      console.log("模型字符串", formModel);
      console.log("选择的ids", this.ids);
      this.$refs["mxForm"].validate((valid) => {
        if (valid) {
          batchBindModel({
            type: "0",
            ids: this.ids,
            modelIds: formModel,
          }).then((res) => {
            this.$modal.msgSuccess("绑定成功");
            this.dialogMx = false;
            this.getList();
          });
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm("是否删除改数据项？")
        .then(function () {
          return delPlot(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "plot/exportCPlot",
        {
          ...this.queryParams,
        },
        `plot_${new Date().getTime()}.xlsx`
      );
    },
    goBuild(row) {
      this.$router.push({
        path: "/plot/build",
        query: { id: row.id },
      });
    },
    test(v){
      console.log("模型当前值",v,typeof(v));
      console.log("当前表单中模型的值",this.form.modelIds1,typeof(this.form.modelIds1));

    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bindModel {
  ::v-deep .el-form {
    height: 100% !important;
    background: unset;
    display: block !important;

    .el-form-item {
      margin-left: 40px;
      margin-bottom: 30px !important;
      position: static !important;
    }
  }
}

::v-deep .el-date-editor.el-input {
  width: unset;
}

#longlable{
  ::v-deep .el-form-item__label{
    width: 120px !important;
  }
  ::v-deep .el-form-item__content{
    margin-left:120px !important;
  }
}

::v-deep .el-form{
  padding: 0 30px;
}
</style>
